<template>
  <!-- 商品详情页容器 -->
  <div class="goods-detail-container">
    <!-- 商品图片展示区 -->
    <div class="goods-gallery">
      <!-- 主图容器 -->
      <div class="main-image-container">
        <!-- 主图：显示当前选中图片或默认商品图 -->
        <img
          :src="currentImage || product.goodsImg"
          :alt="product.name"
          class="main-image"
        />
      </div>
      <!-- 缩略图列表 -->
      <div class="thumbnails">
        <!-- 遍历商品图片列表 -->
        <div
          v-for="(img, index) in product.picList"
          :key="index"
          @click="currentImage = img.picUrl"  // 点击切换主图
          :class="['thumbnail', { active: currentImage === img.picUrl }]"  // 当前选中缩略图高亮
        >
          <img :src="img.picUrl" :alt="`商品图${index + 1}`" />
        </div>
      </div>
    </div>

    <!-- 商品信息区 -->
    <div class="goods-info">
      <!-- 商品标题 -->
      <h1 class="goods-title">{{ product.name }}</h1>

      <!-- 价格展示区 -->
      <div class="price-section">
        <!-- 当前价格 -->
        <span class="current-price">¥{{ product.price }}</span>
        <!-- 原价（如果有） -->
        <span class="original-price" v-if="product.goodsMktprice">
          原价: ¥{{ product.goodsMktprice }}
        </span>
        <!-- 小计（数量>1时显示） -->
        <span class="total-price" v-if="quantity > 1">
          小计: ¥{{ (product.price * quantity).toFixed(2) }}
        </span>
      </div>

      <!-- 规格选择区 -->
      <div class="spec-section" v-if="specList && specList.length > 0">
        <!-- 遍历规格列表 -->
        <div v-for="spec in specList" :key="spec.specId" class="spec-item">
          <!-- 规格名称 -->
          <h3 class="spec-title">{{ spec.specName }}</h3>
          <div class="spec-options">
            <!-- 使用Element UI的单选组 -->
            <el-radio-group v-model="selectedSpecs[spec.specId]">
              <!-- 遍历规格选项 -->
              <el-radio
                v-for="option in spec.specValueList"
                :key="option.valueId"
                :label="option.valueId"
                :disabled="option.status === 0"  // 禁用不可选选项
              >
                {{ option.value }}
              </el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>

      <!-- 商品描述 -->
      <div class="description-section">
        <div class="desc-content" v-html="product.description"></div>
      </div>

      <!-- 数量选择区 -->
      <div class="quantity-section">
        <h3 class="quantity-title">数量</h3>
        <div class="quantity-control">
          <!-- 减少数量按钮 -->
          <button class="quantity-btn" @click="decreaseQuantity">-</button>
          <!-- 数量输入框 -->
          <input
            type="number"
            v-model.number="quantity"  // 数字类型绑定
            min="1"
            :max="product.store"  // 最大不超过库存
            class="quantity-input"
            @change="handleQuantityChange"  // 手动输入时校验
          />
          <!-- 增加数量按钮 -->
          <button class="quantity-btn" @click="increaseQuantity">+</button>
        </div>
        <!-- 库存信息 -->
        <span class="stock-info">库存 {{ product.store }} 件</span>
      </div>

      <!-- 操作按钮区 -->
      <div class="action-buttons">
        <!-- 立即购买按钮 -->
        <button class="btn btn-buy" @click="buyNow">立即购买</button>
        <!-- 加入购物车按钮 -->
        <button class="btn btn-cart" @click="addToCart">加入购物车</button>
      </div>
    </div>

    <!-- 商品详情区（富文本内容） -->
    <div class="goods-details" v-if="product.details">
      <div class="detail-content" v-html="product.details"></div>
    </div>
  </div>
</template>

<script>
// 导入Vuex的mapActions辅助函数
import { mapActions } from "vuex";
// 导入获取商品详情的API
import { getGoodsDetail } from "@/api";

export default {
  name: "GoodsDetail",
  data() {
    return {
      loading: false,  // 加载状态
      error: null,     // 错误信息
      // 商品基本信息
      product: {
        goodsImg: "",     // 商品主图
        picList: [],      // 商品图片列表
        name: "",         // 商品名称
        price: 0,         // 商品价格
        store: 0,         // 商品库存
        description: "",  // 商品描述
        details: "",      // 商品详情
      },
      specList: [],       // 规格列表
      currentImage: null, // 当前选中图片
      quantity: 1,        // 购买数量
      selectedSpecs: {},   // 已选规格
    };
  },
  // 组件创建时获取商品数据
  created() {
    this.fetchGoodsDetail();
  },
  methods: {
    // 映射Vuex的ADD_TO_CART action
    ...mapActions(["ADD_TO_CART"]),

    // 获取商品详情数据
    async fetchGoodsDetail() {
      try {
        this.loading = true;
        // 调用API获取数据
        const { code, result } = await getGoodsDetail({
          id: this.$route.params.id,  // 从路由参数获取商品ID
          type: 0,
          cityId: 524,
        });

        if (code !== 200) throw new Error("获取商品数据失败");

        // 合并商品数据
        this.product = {
          ...result.goodsView,
          ...result.productView,
          id: result.productView.id,
        };

        this.specList = result.catSpecList || [];
        this.initSpecSelection();  // 初始化规格选择
        // 设置默认显示第一张图片
        if (this.product.picList?.length) {
          this.currentImage = this.product.picList[0].picUrl;
        }
      } catch (error) {
        this.error = error.message || "加载商品详情失败";
      } finally {
        this.loading = false;
      }
    },

    // 初始化规格选择
    initSpecSelection() {
      this.specList.forEach((spec) => {
        // 找到每个规格的第一个可用选项
        const selectedOption = spec.specValueList.find(
          (opt) => opt.status === 1
        );
        if (selectedOption) {
          // 使用Vue.set确保响应式
          this.$set(this.selectedSpecs, spec.specId, selectedOption.valueId);
        }
      });
    },

    // 获取已选规格文本
    getSelectedSpecText() {
      if (!this.specList.length) return "默认规格";

      return this.specList
        .map((spec) => {
          // 找到每个规格的已选选项
          const selected = spec.specValueList.find(
            (opt) => opt.valueId === this.selectedSpecs[spec.specId]
          );
          return selected ? selected.value : "";
        })
        .filter(Boolean)  // 过滤空值
        .join(" / ");     // 用斜杠连接
    },

    // 加入购物车
    addToCart() {
      // 组装商品数据
      const productToAdd = {
        id: this.product.id,
        name: this.product.name,
        price: this.product.price,
        image: this.product.goodsImg,
        spec: this.getSelectedSpecText(),  // 获取规格文本
        quantity: this.quantity,
        stock: this.product.store,
      };

      // 调用Vuex action
      this.ADD_TO_CART(productToAdd)
        .then(() => {
          this.$message.success("已成功加入购物车");
          this.$router.push("/shopping-car");  // 跳转到购物车
        })
        .catch((error) => {
          this.$message.error("加入购物车失败: " + error.message);
        });
    },

    // 立即购买（先加入购物车再跳转）
    buyNow() {
      this.addToCart();
      this.$router.push("/shopping-car");
    },

    // 增加数量（不超过库存）
    increaseQuantity() {
      if (this.quantity < this.product.store) {
        this.quantity++;
      }
    },

    // 减少数量（不小于1）
    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--;
      }
    },

    // 处理手动输入数量
    handleQuantityChange() {
      if (this.quantity < 1) {
        this.quantity = 1;
      } else if (this.quantity > this.product.store) {
        this.quantity = this.product.store;
      }
    },
  },
};
</script>

<style scoped>
/* 商品详情容器样式 */
.goods-detail-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
}

/* 商品图库样式 */
.goods-gallery {
  width: 480px;
  margin-right: 40px;
}

/* 主图容器样式 */
.main-image-container {
  width: 100%;
  height: 480px;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

/* 缩略图列表样式 */
.thumbnails {
  display: flex;
  gap: 10px;
  overflow-x: auto;  /* 横向滚动 */
}

/* 缩略图项样式 */
.thumbnail {
  width: 80px;
  height: 80px;
  border: 1px solid #ddd;
  cursor: pointer;
  flex-shrink: 0;  /* 防止flex元素收缩 */
}

/* 当前选中缩略图高亮 */
.thumbnail.active {
  border-color: #f56c6c;
}

/* 商品信息区样式 */
.goods-info {
  flex: 1;
  min-width: 300px;
}

/* 价格区域样式 */
.price-section {
  margin: 20px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

/* 当前价格样式（突出显示） */
.current-price {
  font-size: 28px;
  color: #f56c6c;
  font-weight: bold;
}

/* 操作按钮公共样式 */
.btn {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;  /* 过渡效果 */
}

/* 响应式设计：小屏幕适配 */
@media (max-width: 768px) {
  .goods-detail-container {
    flex-direction: column;  /* 改为垂直布局 */
  }
  
  .goods-gallery {
    width: 100%;
    margin-right: 0;
  }
}
</style>